<template>
	<view class="container" style="height: 100%;width: 100%;overflow: hidden;position: relative;">
		<uni-nav-bar :statusBar="true" :fixed="true" :border='false' color="#113A62" backgroundColor="#E3EDF7" left-icon="back"
			 title="预约单明细" @clickLeft="back"/>
		 <view style="height: 100%;width: 100%;overflow: hidden;padding: 0 0 0 16px;box-sizing: border-box;">
			 <view style="width: 100%;padding: 0 16px 0 0;box-sizing: border-box;">
			 	<view style="display: flex;justify-content: space-between;">
					<view>
						<view style="padding-top: 20px;" class="title">
							<text>{{itemDetails.towername}}</text>
							<text style="margin: 0 8px;">—</text>
							<text>{{itemDetails.fpointName}}</text>
						</view>
						<view class="title">
							<text>申请人</text>
							<text style="margin-left: 12px;">{{itemDetails.username}}</text>
						</view>
					</view>
					<view @click="codeView()" style="padding-top: 15px;">
						<uqrcode ref="uqrcode" canvas-id="qrcode" :value="itemDetails.fbillno" size='60'></uqrcode>
					</view>
				</view>
			 	<view style="width: 100%;margin: 0px auto;overflow: hidden">
			 		<form class="form-warp">
			 			<view style="margin-top: 16px;" class="textSize">
			 				开始时间
			 			</view>
			 			<view class="input-group">
			 				<view style="display: flex;justify-content: space-between;align-items: center;">
			 					<uni-datetime-picker disabled class="time" type="date" :clear-icon="false" v-model="workBenDate"/>
			 					<uni-datetime-picker disabled :hide-second='false' class="time" type="time" :clear-icon="false" :value="workBenTime"/>
			 				</view>
			 			</view>
			 			<view style="margin-top: 16px;" class="textSize">
			 				结束时间
			 			</view>
			 			<view class="input-group">
			 				<view style="display: flex;justify-content: space-between;align-items: center;">
			 					<uni-datetime-picker disabled class="time" type="date" :clear-icon="false" v-model="workEndDate"/>
			 					<uni-datetime-picker disabled :hide-second='false' class="time" type="time" :clear-icon="false" :value="workEndTime"/>
			 				</view>
			 			</view>
			 		</form>
			 	</view>
			 </view>
			 
			 <scroll-view scroll-y class="scroll-content" style="height: calc(100% - 330px);overflow-y: auto;marginTop: 20px" >
			 	<view style="width: 100%;">
			 		<scroll-view scroll-x scroll-y class="scroll-content scroll" @touchmove.stop>
			 			<uni-table class="tableshadow" style="margin: 4px 0 20px 0" emptyText="暂无更多数据">
			 					<!-- 表格数据行 -->
			 					<uni-tr class="tableHead" v-for="(item,index) in dataListName" :key="'dataListName'+index">
			 						<uni-td>
			 							<span>{{item.demo1}}</span>	
			 						</uni-td>
			 						<uni-td>
			 							<span>{{item.demo2}}</span>	
			 						</uni-td>
			 						<uni-td>
			 							<span>{{item.demo3}}</span>	
			 						</uni-td>
			 						<uni-td>
			 							<span>{{item.demo4}}</span>	
			 						</uni-td>
			 						<uni-td>
			 							<span>{{item.demo5}}</span>	
			 						</uni-td>
			 						<uni-td>
			 							<span>{{item.demo6}}</span>	
			 						</uni-td>
			 					</uni-tr>
			 					<uni-tr v-for="(item,index) in itemDetails.details" :key="index">
			 						<uni-td>
			 							<span>{{item.fgoodname}}</span>	
			 						</uni-td>
			 						<uni-td>
			 							<span>{{item.fretqty}}</span>	
			 						</uni-td>
			 						<uni-td>
			 							<span>{{item.fgoodno}}</span>	
			 						</uni-td>
			 						<uni-td>
			 							<span>{{item.fcabname}}</span>	
			 						</uni-td>
			 						<uni-td>
			 							<span>{{item.fboxname}}</span>	
			 						</uni-td>
			 						<uni-td>
			 							<span>{{item.fusedatestr}}</span>	
			 						</uni-td>
			 					</uni-tr>
			 			</uni-table>
			 		</scroll-view>
			 		
			 	</view>	
			 </scroll-view>
		 </view>
		 <view v-if="qrcodeView" @click="close()" class="shadow">
		 </view>
		 <view v-show="qrcodeView" style="width: 110px;height: 110px;z-index: 5;background-color: #7bc3f4;position: absolute;top: 30%;left: 30%;">
		 	<uqrcode v-if="qrcodeView" size='160' ref="uqrcode1" canvas-id="qrcode1" :value="itemDetails.fbillno"></uqrcode>
		 </view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				sysInfo: null, // 系统变量
				itemDetails: null, // 数据
				workBenDate: '',  // 日期
				workEndDate: '',  // 日期
				workBenTime: "",  // 开始时间
				workEndTime: "", // 结束时间
				qrcodeView: false, // 二维码
			}
		},
		onLoad(e) {
			that = this;
			that.sysInfo = this.$sys.getSysInfo();
			let ds
			try {
				ds = JSON.parse(decodeURIComponent(e.item));
			} catch (error) {}
			console.log('ds',ds)
			that.itemDetails = ds
			// 实验开始时间
			that.workBenDate = that.getDate(ds.fplanusedate).split(' ')[0]
			that.workBenTime = that.getDate(ds.frealbegtime).split(' ')[1]
			console.log(that.getDate(ds.frealbegtime))
			// 实验结束时间
			that.workEndDate = that.getDate(ds.fplanusedate).split(' ')[0]
			that.workEndTime = that.getDate(ds.frealendtime).split(' ')[1]
			console.log(that.getDate(ds.frealendtime))
			that.dataListName = [
				{demo1:'化学品名',demo2:'预约数量',demo3:'物料编号',demo4:'存放点',demo5:'仓号',demo6:'入库日期'},
			]
		},
		methods: {
			codeView(){
				console.log('1234')
				that.qrcodeView = true
			},
			close(){
				that.qrcodeView = false
			},
			getDate(e) {
					const date = new Date(e)
					var y = date.getFullYear();
					var m = date.getMonth() + 1;
					m = m < 10 ? ('0' + m) : m;
					var d = date.getDate();
					d = d < 10 ? ('0' + d) : d;
					var h = date.getHours();
					var minute = date.getMinutes();
					minute = minute < 10 ? ('0' + minute) : minute;
					return y + '-' + m + '-' + d +' ' + h + ':' + minute
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	/* 遮罩层 */
	.shadow{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: #FAFCFD;
		opacity: 0.85;
		z-index: 5;
	}
	.title{
		/* Text */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		/* identical to box height, or 150% */
		color: #113A62;
		width: 100%;
		text-align: left;
		padding-top: 10px;
	}
	.form-warp {
		zoom: 1;
	}
	
	.form-warp:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20'
	}
	
	.input-group {
		position: relative;
		margin-top: 8px;
	}
	
	.input-group .uni-icons {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		left: 48rpx;
		top: 20rpx;
		border-right: 1rpx solid #dedede;
		padding-right: 10rpx;
		font-size: 30rpx !important;
	}
	
	.input-group input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 25px;
		background: #ffffff;
		font-size: 28rpx;
		border-radius: 50rpx;
	}
	
	/*解决光标大小不一致问题*/
	.uni-input-input {
		height: 100%;
		line-height: normal;
	}
	
	.scroll {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
		}
		.scroll-box {
			padding: 24rpx;
			display: inline-block;
			width: 300rpx;
			height: 172rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			box-shadow: 0px 0px 4rpx 0px #ACACAC;
			border-radius: 8rpx;
			border: 1rpx solid #ACACAC;
		}
	
		.scroll-box:last-child {
			margin-right: 0;
		}
</style>
